<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="input" />
    <button id="btn">节流</button>
    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/event.js"></script>
    <script src="libs/zepto/touch.js"></script>
    <script src="libs/zepto/ajax.js"></script>

    <script>
        // var btn = document.querySelector('#btn');

        // var inputObj = document.getElementById('#input');
        var page = 0;
        function input(value) {
            
            page++;
            // console.log(value, '防抖');
            $.ajax({
                url: 'http://youyong.ba:8080/mock/609a94bd9fdbd7143b8d6737/aa/manage/list/index',// 请求网址
                type: 'GET',
                data: {// 请求参数，一般会带上页码
                    'page': page,
                    'value':value,
                    't': new Date().getTime()// 防止GET请求缓存
                },
                success: function (res) {
                    console.log(res, "<--");
                }
            });
        }


        function throttling(fun, delay) {
            let last,timer;

            return function (args) {
                var that = this;

                var now = +new Date();
                
                console.log(new Date(), '<----new Date()');

                console.log(+new Date(), '<---+new Date()');

                if (last && now < last + delay) {
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                        fun.call(that, args);
                    }, delay)
                } else {
                    last = now;
                    fun.call(that, args);
                }
                
            }
        }

        const throttlingInput = throttling(input, 1500);


        $('#btn').off("click").on("click", function (e) {
            throttlingInput($('#input').val());
            // input($('#input').val());
        })

    </script>
</body>
</html>